<template>
  <div class="shortcut-form">
    <div class="row">
      <div class="label">翻译</div>
      <el-input
        v-model="shortcuts.translate"
        readonly
        placeholder="按下组合键"
        @keydown.prevent="onKeydown('translate', $event)"
      />
    </div>
    <div class="row">
      <div class="label">截屏</div>
      <el-input
        v-model="shortcuts.screenshot"
        readonly
        placeholder="按下组合键"
        @keydown.prevent="onKeydown('screenshot', $event)"
      />
    </div>
    <div class="row">
      <div class="label">设置</div>
      <el-input
        v-model="shortcuts.setting"
        readonly
        placeholder="按下组合键"
        @keydown.prevent="onKeydown('setting', $event)"
      />
    </div>
    <div class="tips">按下组合键以设置新的快捷键</div>
    <div class="actions">
      <el-button type="primary" @click="saveShortcuts" :loading="saving"
        >保存</el-button
      >
      <el-button @click="resetDefault" :disabled="saving">恢复默认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { getShortcuts, setShortcuts } from "@/utils/tauri";
import { ElMessage } from "element-plus";

const isMac =
  /Mac/.test(navigator.platform) || /Mac OS/.test(navigator.userAgent);
const cmdKey = isMac ? "Cmd" : "Ctrl";
const shortcuts = reactive({
  translate: `${cmdKey}+Shift+T`,
  screenshot: `${cmdKey}+Shift+S`,
  setting: `${cmdKey}+,`,
});

function normalizeKey(key: string): string {
  if (!key) return "";
  const upper = key.length === 1 ? key.toUpperCase() : key;
  const map: Record<string, string> = {
    " ": "Space",
    ArrowUp: "Up",
    ArrowDown: "Down",
    ArrowLeft: "Left",
    ArrowRight: "Right",
    Escape: "Esc",
    Command: "Cmd",
    Control: "Ctrl",
    AltGraph: "Alt",
  };
  return map[upper] || upper;
}

function onKeydown(
  field: "translate" | "screenshot" | "setting",
  e: KeyboardEvent
) {
  const parts: string[] = [];
  if (isMac ? e.metaKey : e.ctrlKey) parts.push(cmdKey);
  if (e.altKey) parts.push("Alt");
  if (e.shiftKey) parts.push("Shift");
  const key = normalizeKey(e.key);
  if (key) parts.push(key);
  const combo = parts.join("+");
  (shortcuts as any)[field] = combo || (shortcuts as any)[field];
}

function toDisplay(s: string): string {
  if (isMac)
    return s.replace("CmdOrCtrl", "Cmd").replace("CommandOrControl", "Cmd");
  return s.replace("CmdOrCtrl", "Ctrl").replace("CommandOrControl", "Ctrl");
}

function resetDefault() {
  shortcuts.translate = `${cmdKey}+Shift+T`;
  shortcuts.screenshot = `${cmdKey}+Shift+S`;
  shortcuts.setting = `${cmdKey}+,`;
}

const saving = ref(false);
async function saveShortcuts() {
  try {
    saving.value = true;
    await setShortcuts({
      translate: shortcuts.translate,
      screenshot: shortcuts.screenshot,
      setting: shortcuts.setting,
    });
    ElMessage.success("快捷键已更新");
  } catch (e: any) {
    ElMessage.error(e?.message || "更新失败");
  } finally {
    saving.value = false;
  }
}

onMounted(async () => {
  try {
    const cfg = await getShortcuts();
    shortcuts.translate = toDisplay(cfg.translate);
    shortcuts.screenshot = toDisplay(cfg.screenshot);
    shortcuts.setting = toDisplay(cfg.setting);
  } catch (e) {}
});
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.row .label {
  width: 120px;
}
.actions {
  margin-top: 20px;
}
.tips {
  font-size: 12px;
  color: #666;
}
</style>
